import React, { Component } from 'react';
import PubSub from 'pubsub-js'
import { meshLog, SPRemove, SPGet, SPSet } from '../../config';
import { DEVICE_SET_DIALOG_SHOW, DEVICE_SET_DIALOG_HIDE, Regular, CUR_AREA_NO, webHeight } from '../../const/infoConst';
import "./css/settings.less";

import { deleteuser } from '../../api/index.js';


export default class Settings extends Component {
  constructor(props) {
    super(props);
    this.state = {
      firstName: '',
      lastName: '',
      email: '',
      app: 'HSE WISE APP',
      agree: false,
      isSubmitting: false,
      submissionSuccess: false,
      errors: {}
    };
  }

  componentDidMount() {
    SPSet('dizhilan', JSON.stringify(1));//控制OK跳转的页面所需要的具体数据
    SPSet('dizhilanbanben', JSON.stringify(9));//控制OK跳转的页面所需要的具体数据,刷新版本需要的
    //设置界面弹窗
    PubSub.subscribe(DEVICE_SET_DIALOG_SHOW, (msg, index) => {
      this.setState({
        showDiaolg: 'visible',
      })
    })
    PubSub.subscribe(DEVICE_SET_DIALOG_HIDE, (msg, index) => {
      this.setState({
        showDiaolg: 'hidden',
      })
    })
  }

  validateForm = () => {
    const errors = {};
    // if (!this.state.firstName.trim()) errors.firstName = 'firstName cannot be null';
    // if (!this.state.lastName.trim()) errors.lastName = 'lastName cannot be null';
    if (!this.state.email.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) {
      errors.email = 'Please enter a valid email address';
    }
    // if (!this.state.agree) errors.agree = '必须同意条款才能提交';

    this.setState({ errors });
    return Object.keys(errors).length === 0;
  };

  handleChange = (e) => {
    const { name, value, type, checked } = e.target;
    this.setState({
      [name]: type === 'checkbox' ? checked : value,
      errors: { ...this.state.errors, [name]: null }
    });
  };

  handleSubmit = async (e) => {
    e.preventDefault();
    if (!this.validateForm()) return;
    const { email, value, type, checked } = e.target;
    let token = SPGet('token')
    const deviceNo = '0A977101B130AED99DF4B2499DB30E5A'
    const maddr = email.value
    meshLog('email', email.value);
    meshLog('token', token);
    meshLog('deviceNo', deviceNo);

    this.setState({ isSubmitting: true });


    let result = await deleteuser(maddr, deviceNo, token);
    meshLog('result', result);
    if (result.code == 0) {
      meshLog('123',);
      this.setState({ submissionSuccess: true });
    }
    else {
      this.setState({ isSubmitting: false });
      alert('Delete failed, please confirm if the email you want to delete is correct')
    }
  };

  renderForm() {
    const { errors, isSubmitting } = this.state;
    return (
      <form onSubmit={this.handleSubmit} className="account-deletion-form">
        <h2>Request Account Deletion</h2>

        {/* <div className="form-group">
          <label>
            First Name
            <input
              type="text"
              name="firstName"
              value={this.state.firstName}
              onChange={this.handleChange}
              className={errors.firstName ? 'error' : ''}
            />
          </label>
          {errors.firstName && <span className="error-message">{errors.firstName}</span>}
        </div>

        <div className="form-group">
          <label>
            Last Name
            <input
              type="text"
              name="lastName"
              value={this.state.lastName}
              onChange={this.handleChange}
              className={errors.lastName ? 'error' : ''}
            />
          </label>
          {errors.lastName && <span className="error-message">{errors.lastName}</span>}
        </div> */}

        <div className="form-group">
          <label>
            Email
            <input
              type="email"
              name="email"
              value={this.state.email}
              onChange={this.handleChange}
              className={errors.email ? 'error' : ''}
            />
          </label>
          {errors.email && <span className="error-message">{errors.email}</span>}
        </div>

        <div className="form-group">
          <label>
            HSE WISE:
            <select name="app" value={this.state.app} onChange={this.handleChange}>
              <option value="HSE WISE APP">HSE WISE APP</option>
              <option value="HSE WISE WEB">HSE WISE WEB</option>
            </select>
          </label>
        </div>

        {/* <div className="form-group checkbox-group">
          <label>
            <input
              type="checkbox"
              name="agree"
              checked={this.state.agree}
              onChange={this.handleChange}
              className={errors.agree ? 'error' : ''}
            />
            我同意启用Google reCAPTCHA Cookie政策
          </label>
          {errors.agree && <span className="error-message">{errors.agree}</span>}
        </div> */}

        <button
          type="submit"
          disabled={isSubmitting}
          className="submit-button"
        >
          {isSubmitting ? 'submit...' : 'submit'}
        </button>
      </form>
    );
  }

  renderSuccess() {
    return (
      <div className="success-message">
        <h2>The request has been successfully </h2>
        <p> Your account has been deleted!</p>
        <button onClick={() => this.setState({ submissionSuccess: false, submissionSuccess: false, isSubmitting: false })}>
          return
        </button>
      </div>
    );
  }

  render() {
    return this.state.submissionSuccess ? this.renderSuccess() : this.renderForm();
  }
}
